<template>
    <div :style="carStyle">
        <div class="colummenu" :style="menuStyle">
            <div v-for="(colum, index) in obj.tableData.colums" :key="colum.id" :style="computedMenuStyle(index)"
                @click="clickTabHandle(colum, index)">{{ colum.text || '按钮' }}</div>
        </div>
    </div>
</template>

<script>
export default {
    Name: "TabSwitch",
    props: {
        obj: Object,
        tabHideCardHandle: Function,
    },
    data() {
        return {
            carStyle: {},
            menuStyle: {},
            timer: {},
            dataIndex: -1,
        }
    },
    mounted() {
        this.setStyle();
        this.start();
        this.dataStr = JSON.stringify(this.obj.tableData);
    },
    beforeDestroy() {
        clearInterval(this.timer)
    },
    methods: {
        start() {
            var self = this;
            this.$nextTick(() => {
                setTimeout(() => {
                    self.tabMapColumData(0);
                }, 200);
            });

            // 开启自动切换
            // isAuto: false,
            // speed: 10,
            clearInterval(this.timer)
            if (this.obj.tableData.menu.isAuto) {
                this.timer = setInterval(() => {
                    self.tabMapColumData(self.dataIndex + 1);
                }, this.obj.tableData.menu.speed * 1000);
            }
        },
        setStyle() {
            var style = this.obj.style;

            var backgroundColor = "";
            var backgroundImage = "";
            // 背景颜色
            if (style.backgroundImage.length) {
                backgroundImage = `url(${style.backgroundImage}`;
            } else if (style.backgroundColor.length > 0) {
                backgroundColor = style.backgroundColor;
            }

            var boxShadow = "";
            if (style.boxShadow) {
                boxShadow = `${style.boxShadow.h}px ${style.boxShadow.v}px ${style.boxShadow.blur}px ${style.boxShadow.spreed}px ${style.boxShadow.color}`
            }

            this.carStyle = {
                boxShadow,
                width: "100%",
                height: "100%",
                display: "flex",
                backgroundSize: "100% 100%",
                borderStyle: "solid",
                backgroundImage,
                backgroundColor,
                color: style.color,
                fontSize: style.fontSize + "px",
                justifyContent: style.justifyContent,
                alignItems: style.alignItems,
                borderColor: style.borderColor,
                borderWidth: style.borderWidth + "px",
                borderRadius: style.borderRadius + "px",
                fontWeight: style.fontWeight,
                fontStyle: style.fontStyle,
                flexDirection: "",
            }

            // #region 新的背景颜色

            if (this.obj.style.bgcolorType == "image") {
                this.carStyle.backgroundImage = backgroundImage;
            } else if (this.obj.style.bgcolorType == "gradient") {
                if (this.obj.style.gradient.isRadial) {
                    this.carStyle.backgroundImage = `radial-gradient(${this.obj.style.gradient.colorStart}, ${this.obj.style.gradient.colorEnd})`;
                } else {
                    this.carStyle.backgroundImage = `linear-gradient(${this.obj.style.gradient.fontAngle}deg, ${this.obj.style.gradient.colorStart}, ${this.obj.style.gradient.colorEnd})`;
                }
            } else {
                this.carStyle.backgroundColor = backgroundColor;
            }

            // #endregion

            if (this.obj.tableData.menu) {
                var position = this.obj.tableData.menu.position;
                if (position == "shu") {
                    this.menuStyle = {
                        display: 'flex',
                        flexDirection: 'column'
                    }
                } else {
                    this.menuStyle = {
                        display: 'flex',
                    }
                }
            }
        },
        clickTabHandle(colum, index) {
            this.tabMapColumData(index);
        },
        tabMapColumData(index) {
            if (index != this.dataIndex) {
                if (index >= this.obj.tableData.colums.length) {
                    index = 0;
                }

                this.dataIndex = index;
                // this.setStyle();

                // 统计需要隐藏的看板
                var hdids = [];
                if (this.obj.tableData.colums.length) {
                    this.obj.tableData.colums.forEach((e, i) => {
                        if (e.id.length && index != i) {
                            hdids = hdids.concat(e.id);
                            // e.id 为多选数组
                        }
                    })
                    this.$emit("tabHideCardHandle", hdids, this.obj.tableData.colums[index].id);
                }
            }
        },
        computedMenuStyle(index) {
            // 数据切换样式
            var tabFontSize = 18;
            var tabColor = "#333";
            var tabBackgroundColor = "";
            var backgroundImage = "";
            var borderColor = "";
            var borderWidth = 0;
            var fontWeight = "";
            var fontStyle = "";
            if (this.obj.tableData.menu) {
                if (this.obj.tableData.menu.fontSize) {
                    tabFontSize = this.obj.tableData.menu.fontSize
                }
                if (this.obj.tableData.menu.color) {
                    tabColor = this.obj.tableData.menu.color
                }
                if (this.obj.tableData.menu.fontWeight) {
                    fontWeight = this.obj.tableData.menu.fontWeight
                }
                if (this.obj.tableData.menu.fontStyle) {
                    fontStyle = this.obj.tableData.menu.fontStyle
                }
                if (this.obj.tableData.menu.backgroundColor) {
                    tabBackgroundColor = this.obj.tableData.menu.backgroundColor
                }
                if (this.obj.tableData.menu.borderColor) {
                    borderColor = this.obj.tableData.menu.borderColor
                }
                if (this.obj.tableData.menu.borderWidth) {
                    borderWidth = this.obj.tableData.menu.borderWidth
                }
                if (this.obj.tableData.menu.backgroundImage) {
                    backgroundImage = `url(${this.obj.tableData.menu.backgroundImage}`;
                }
            }
            if (this.dataIndex == index && this.obj.tableData.activeMenu) {
                if (this.obj.tableData.activeMenu.fontSize) {
                    tabFontSize = this.obj.tableData.activeMenu.fontSize
                }
                if (this.obj.tableData.activeMenu.color) {
                    tabColor = this.obj.tableData.activeMenu.color
                }
                if (this.obj.tableData.activeMenu.fontWeight) {
                    fontWeight = this.obj.tableData.activeMenu.fontWeight
                }
                if (this.obj.tableData.activeMenu.fontStyle) {
                    fontStyle = this.obj.tableData.activeMenu.fontStyle
                }
                if (this.obj.tableData.activeMenu.backgroundColor) {
                    tabBackgroundColor = this.obj.tableData.activeMenu.backgroundColor
                }
                if (this.obj.tableData.activeMenu.borderColor) {
                    borderColor = this.obj.tableData.activeMenu.borderColor
                }
                if (this.obj.tableData.activeMenu.borderWidth) {
                    borderWidth = this.obj.tableData.activeMenu.borderWidth
                }
                if (this.obj.tableData.activeMenu.backgroundImage) {
                    backgroundImage = `url(${this.obj.tableData.activeMenu.backgroundImage}`;
                }
            }

            return {
                textAlign: 'center',
                fontSize: tabFontSize + "px",
                color: tabColor,
                backgroundColor: tabBackgroundColor,
                backgroundImage,
                backgroundSize: '100% 100%',
                fontWeight: fontWeight,
                fontStyle: fontStyle,
                borderColor: borderColor,
                borderWidth: borderWidth + "px",
                margin: this.obj.tableData.menu.margin + "px",
            }
        }
    },
    watch: {
        obj: {
            handler(newVal, oldVal) {
                this.setStyle();

                if (JSON.stringify(this.obj.tableData) != this.dataStr) {
                    this.dataStr = JSON.stringify(this.obj.tableData);

                    this.start();
                }
            },
            deep: true,
        }
    },
}
</script>

<style scoped>
.colummenu {
    position: absolute;
}

.colummenu>div {
    cursor: pointer;
    padding: 5px 10px;
    border-style: solid;
}
</style>